<template>
<div id="loginTab">
    <div class="index">
<div class="login-top">
	<h6 class="imga" ><img style="width:100%;height:100%;" src="../../assets/img/login/loginbgs.png" alt=""></h6>
</div>
<form action="" method="post" id="form">
	<div class="logins">
		<h6 class="h6">
		</h6>
		<div class="contents">
				<div class="conten-left" style="width:17.6%;float: left;margin-top: 14%;margin-left: 26%;" @click="handleTab(1)">
					<div class="grid-demo grid-demo-bg1">
						<div class="left div" id="mouse">
							<img class="imgs" src="../../assets//img/login/zdkh.png" alt="">
							<p class="yaodian" style="color:#4285f4">医药公司</p>
							<div class="image">
								<img src="../../assets//img/login/djjr.png" alt="">
							</div>
						</div>
					</div>
				 </div>
				<div class="conten-center" style="width:17.6%;float: left;margin-top: 14%;margin-left: 2%;"  @click="handleTab(2)">
					<div class="grid-demo grid-demo-bg1">
						<div class="center div" id="mouse">
							<img class="imgs" src="../../assets//img/login/yygs.png" alt="">
							<p class="yaodian" style="color:#4285f4">生产厂商</p>
							<div class="image">
								<img src="../../assets/img/login/djjr.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="conten-right" style="width:17.6%;float: left;margin-top: 14%;margin-left: 2%;"  @click="handleTab(3)">
					<div class="grid-demo grid-demo-bg1">
						<div class="right div" id="mouse">
							<img class="imgs" src="../../assets//img/login/sccs.png" alt="">
							<p class="yaodian" style="color:#4285f4">材料商</p>
							<div class="image">
								<img src="../../assets//img/login/djjr.png" alt="">
							</div>
						</div>
					</div>
		     </div>
		</div>
	</div>
</form>
</div>
</div>
</template>
<script>
    export default {
        name: 'loginTab',
        data() {
            return {
            }
        },
        methods: {
            handleTab(index) {
             if(index == 1) {
                 this.$router.push('/home')
             }else if(index == 2){
                  window.location.href= 'http://admin.dutall.com/indexChange?enviromentType=2'
             }else {
                    window.location.href= 'http://admin.dutall.com/indexChange?enviromentType=3'
             }
            }
        }
    }
</script>

<style lang="scss" scoped>
#loginTab {
.index {
			min-width:1280px;
			overflow-x: auto;
			width:100%;
			height:100%;
		}
			.login-top h6 img {
				position: absolute;
				background-size: cover;
			}

			.login-top .imga img {
				width:40%;
				height: 52%;
				top: 0;
				background-size: cover;
			}
			.login-top .imgb img {
				width: 26%;
				height: 42%;
				top: 14.81%;
				left: 1.82%;
				background-size: cover;
			}
		.login-top {
			min-width: 1280px;
			overflow-x: auto;
			height: 100%;
			width: 100%;
			position: absolute;}
			.login-top .imgc img {
				right: 0;
				bottom: 0;
				width: 19%;
				height: 84%;
			}

			.login-top .imgd img {
				right: 11.3%;
				bottom: 2.5%;
				width: 16%;
				height: 30%;
				background-size: cover;
			}
			.login-top .imge img {
				left: 17.86%;
				width: 5%;
				height: 26%;
				bottom: 8.74%;
			}
			.login-top .imgf img {
				left: 45.1%;
				bottom: 0;
				width: 2.6%;
				height: 18.8%;
			}
			.login-top .imgg img {
				width: 21.5%;
				height: 52.34%;
				right: 0%;
				bottom: 10.4%;
			}
			/*头部结束*/
			.logins .contents {
				position: relative;
			}
			.logins .contents .div {
				margin-top: 7.19%;;
			}

			.logins .contents .imgs {
				margin-top: 9.34%;
				background-size: cover;
				width: 100px;
				height: 90px;
			}

			.logins .contents .yaodian {
				font-size: 15px;
				color: #009C77;
				font-weight: 700;
				margin-top: 10%;
				text-align: center;
			}

			#form {
				width: 100%;
				height: 100%;
			}

			.logins .contents .image {
				margin-top: 15%;
				width: 46%;
				margin-left: 26%;
				height: 10%;
				border: 1px solid #009C77;
				border-radius: 20px;
				padding: 0 2%;
				margin-bottom: 10%;
			}

			.logins .contents .image img {
				width: 100%;
				height: 100%;
			}

			.logins .h6 {
				height: 100%;
				width: 100%;
			}
			.contents .layui-col-md4 {
				height: 100%;
			}

			.logins .left {
				width: 80%;
				border: 1px solid #fff;
				background-color: #fff;
				cursor: pointer;
				border-radius: 12px;
				box-shadow: 0px 0px 6px 4px #DBE0E1;
				text-align: center;
			}
			.logins .center {
				width: 80%;
				text-align: center;
				border: 1px solid #fff;
				background-color: #fff;
				cursor: pointer;
				border-radius: 12px;
				box-shadow: 0px 0px 6px 4px #DBE0E1
			}

			.logins .right {
				width: 80%;
				border: 1px solid #fff;
				background-color: #fff;
				text-align: center;
				cursor: pointer;
				border-radius: 12px;
				box-shadow: 0px 0px 6px 4px #DBE0E1
			}
			.contents .layui-row {
				width: 50%;
				margin: 14% auto;
			}
		#mouse:hover {
			border: 1px solid #4285f4;
			/*box-shadow: 0px 0px 6px 3px green;*/
		}
        }
</style>
